<template>
  <PageWrapper title="数据显示">
    <template #headerContent>
      <Form layout="vertical">
        <div class="lg:flex">
          <div class="lg:w-1/3 w-full !mr-4 enter-y">
            <FormItem label="选择设备类型">
              <Select v-model:value="selectedDevice" placeholder="请选择设备类型" @change="handleDeviceName">
                <SelectOption v-for="baudRate in deviceTypeList" :key="baudRate" :value="baudRate">{{
                  baudRate
                }}</SelectOption>
              </Select>
            </FormItem>
          </div>
          <div class="lg:w-1/3 w-full !mr-4 enter-y">
            <FormItem :label="'选择传感器'">
              <Select placeholder="请选择传感器">
                <SelectOption v-for="sensor in dataSource" :key="sensor.deviceSN" :value="sensor.deviceSN" allowClear>{{
                  sensor.deviceSN }}</SelectOption>
              </Select>
            </FormItem>
          </div>
          <div class="lg:w-1/3 w-full !mr-4 enter-y">
            <FormItem :label="'选择时间节点'">
              <Select placeholder="请选择时间节点">
                <SelectOption v-for="sensor in dataSource" :key="sensor.deviceSN" :value="sensor.deviceSN" allowClear>{{
                  sensor.deviceSN }}</SelectOption>
              </Select>
            </FormItem>
          </div>
        </div>
      </Form>
    </template>

    <!-- <template #extra>
      <span class="ml-4 text-lg"> 实时刷新 </span>
      <Switch @change="handleRealTimeRefresh" size="larg" v-model:checked="realTimeRefresh" />
    </template>
    <div style="margin: 0 0 10px 0">
      <div class="w-1/1 bg-white ml-4 p-4 border">
        <span class="text-lg font-medium mr-4"> 传感器列表: </span>
        <Button class="ml-4" v-for="sensor in sensorList" :key="sensor.address"
          :type="sensor.sensorSN == nowSensor?.sensorSN ? 'primary' : 'dashed'" @click="nowSensor = sensor">
          {{ sensor.sensorSN }}
        </Button>
      </div>
    </div> -->
    <!-- <div>
      <div class="w-1/1 bg-white ml-4 p-4 mb-4">
        <span class="text-lg font-medium mr-4"> 特征值: </span>
        <Button class="ml-4" v-for="featureType in featureListType" :key="featureType.value"
          :type="featureType.value == nowFeatureType?.value ? 'primary' : 'dashed'" @click="nowFeatureType = featureType">
          {{ featureType.name }}
        </Button>
        <hr class="my-4" />
        <Table :dataSource="featureList" :columns="featureColumns" :scroll="{ x: 'calc(700px + 50%)', y: 500 }">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key == 'receiveTimeFormat'">{{
              formatMilliseconds(record.receiveTime)
            }}</template>
            <template v-if="column.key == 'xrms'">
            </template>
          </template>
        </Table>
      </div>
    </div>
    <div class="w-1/1 bg-white ml-4 p-4 border">
      <span class="text-lg font-medium mr-4"> 切换数据: </span>
      <Button class="ml-4" @click="getSensorRawDataNow">获取最新</Button>
    </div>
    <div class="w-1/1 bg-white ml-4 p-4 border mb-4">
      <span class="text-lg font-medium mr-4"> 切换类型:</span>
      <Button class="ml-4" v-for="rawDataType in rawDataTypeList" :key="rawDataType.value"
        :type="rawDataType.value == nowRawDataType?.value ? 'primary' : 'dashed'" @click="nowRawDataType = rawDataType">
        {{ rawDataType.name }}
      </Button>
    </div>
    <div class="flex">
      <div class="w-1/1 bg-white ml-4 p-4 mb-4">
        <span class="text-lg font-medium mr-4"> 时域曲线 </span>
        <hr class="my-4" />
        <div class="overflow-auto">
          <Line ref="timeChartDataRef" />
        </div>
      </div>
      <div class="w-1/1 bg-white ml-4 p-4 mb-4">
        <span class="text-lg font-medium mr-4"> 频域曲线 </span>
        <hr class="my-4" />
        <div class="overflow-auto">
        </div>
      </div>
    </div> -->
  </PageWrapper>
</template>
<script lang="ts" setup>
// import { reactive, watchEffect, ref, onMounted, watch } from 'vue'
// import {
//   ListApi as ListSensorApi,
//   ListFeatureDataApi,
//   GetSensorRawDataNowApi,
// } from '/@/api/sensor/sensor'
// import { Sensor, SensorFeatureData, SensorFeatureBo } from '/@/api/sensor/model/sensor'
// import { Page } from '/@/api/model/baseModel'
// import { Table, Button, Switch } from 'ant-design-vue'
// import { PageWrapper } from '/@/components/Page'
// import { useWebSocket } from '@vueuse/core'
// import Line from './components/Line.vue'
// import { formatMilliseconds } from '/@/utils/dateUtil'

// const sensorFeatureBo = ref<SensorFeatureBo>({ desc: true } as SensorFeatureBo)
// const nowSensor = ref<Sensor>({} as Sensor)
// const sensorList = ref<Array<Sensor>>([] as Array<Sensor>)
// watch(nowSensor, () => {
//   sensorFeatureBo.value.sensorSN = nowSensor.value?.sensorSN
//   listFeatureData()
//   getSensorRawDataNow()
// })
// const listSensor = async () => {
//   sensorList.value = await ListSensorApi()
//   if (sensorList.value && sensorList.value.length) {
//     nowSensor.value = sensorList.value[0]
//   }
// }

// const featurePage = ref<Page<SensorFeatureData>>({} as Page<SensorFeatureData>)
// const featureList = ref<Array<SensorFeatureData>>([] as Array<SensorFeatureData>)

// const listFeatureData = async () => {
//   featurePage.value = await ListFeatureDataApi(sensorFeatureBo.value)
//   featureList.value = [...featurePage.value.content]
// }

// interface DataType {
//   name: string
//   value: string
//   option: any
// }

// const featureListType = ref<Array<DataType>>([
//   {
//     name: '加速度',
//     value: 'accFeature',
//     option: {
//       yAxis: {
//         name: '加速度 g',
//       },
//     },
//   },
//   {
//     name: '正弦加速度',
//     value: 'accSinFeature',
//     option: {
//       yAxis: {
//         name: '加速度 g',
//       },
//     },
//   },
//   {
//     name: '速度',
//     value: 'velFeature',
//     option: {
//       yAxis: {
//         name: '速度 mm/s',
//       },
//     },
//   },
//   {
//     name: '位移',
//     value: 'disFeature',
//     option: {
//       yAxis: {
//         name: '位移 mm',
//       },
//     },
//   },
// ])
// const nowFeatureType = ref<DataType>(featureListType.value[0])

// watch(nowFeatureType, () => {
//   try {
//     let tableCloumn1: any = featureColumns.value[1]
//     tableCloumn1.children[0].dataIndex[0] = nowFeatureType.value.value
//     tableCloumn1.children[1].dataIndex[0] = nowFeatureType.value.value
//     tableCloumn1.children[2].dataIndex[0] = nowFeatureType.value.value

//     let tableCloumn2: any = featureColumns.value[1]
//     tableCloumn2.children[0].dataIndex[0] = nowFeatureType.value.value
//     tableCloumn2.children[1].dataIndex[0] = nowFeatureType.value.value
//     tableCloumn2.children[2].dataIndex[0] = nowFeatureType.value.value

//     let tableCloumn3: any = featureColumns.value[2]
//     tableCloumn3.children[0].dataIndex[0] = nowFeatureType.value.value
//     tableCloumn3.children[1].dataIndex[0] = nowFeatureType.value.value
//     tableCloumn3.children[2].dataIndex[0] = nowFeatureType.value.value
//   } catch (error) {}
// })

// const featureColumns = ref<any>([
//   {
//     title: '接收时间',
//     dataIndex: 'receiveTime',
//     key: 'receiveTimeFormat',
//     width: 200,
//     align: 'center',
//     sortOrder: true,
//   },
//   {
//     title: 'X轴',
//     align: 'center',
//     children: [
//       {
//         title: '均方根',
//         align: 'center',
//         dataIndex: ['accFeature', '0', 'rmsValue'],
//         key: 'xrms',
//       },
//       {
//         title: '绝对均值',
//         align: 'center',
//         dataIndex: ['accFeature', '0', 'absMeanValue'],
//         key: 'xmean',
//       },
//       {
//         title: '峰峰值',
//         align: 'center',
//         dataIndex: ['accFeature', '0', 'peakToPeakValue'],
//         key: 'xpeak',
//       },
//     ],
//   },
//   {
//     title: 'Y轴',
//     align: 'center',
//     children: [
//       {
//         title: '均方根',
//         align: 'center',
//         dataIndex: ['accFeature', '1', 'rmsValue'],
//         key: 'xrms',
//       },
//       {
//         title: '绝对均值',
//         align: 'center',
//         dataIndex: ['accFeature', '1', 'absMeanValue'],
//         key: 'xmean',
//       },
//       {
//         title: '峰峰值',
//         align: 'center',
//         dataIndex: ['accFeature', '1', 'peakToPeakValue'],
//         key: 'xpeak',
//       },
//     ],
//   },
//   {
//     title: 'Z轴',
//     align: 'center',
//     children: [
//       {
//         title: '均方根',
//         align: 'center',
//         dataIndex: ['accFeature', '2', 'rmsValue'],
//         key: 'xrms',
//       },
//       {
//         title: '绝对均值',
//         align: 'center',
//         dataIndex: ['accFeature', '2', 'absMeanValue'],
//         key: 'xmean',
//       },
//       {
//         title: '峰峰值',
//         align: 'center',
//         dataIndex: ['accFeature', '2', 'peakToPeakValue'],
//         key: 'xpeak',
//       },
//     ],
//   },
// ])

// const realTimeRefresh = ref(false)

// const handleRealTimeRefresh = () => {
//   if (realTimeRefresh.value) {
//     listFeatureData()
//   }
// }

// const state = reactive({
//   server: 'ws://localhost:9080/resource/websocket',
//   sendValue: '',
//   recordList: [] as any[],
//   nowRecord: null as any,
// })

// const { data } = useWebSocket(state.server, {
//   autoReconnect: true,
//   heartbeat: false,
// })

// watchEffect(() => {
//   if (data.value && realTimeRefresh.value) {
//     try {
//       const vb3000Feature = JSON.parse(data.value)
//       vb3000Feature as SensorFeatureData
//       if (vb3000Feature.address != nowSensor.value.address) return
//       console.log(vb3000Feature)
//       featureList.value = [vb3000Feature, ...featureList.value]
//       getSensorRawDataNow()
//     } catch (error) {
//       console.log(error)
//     }
//   }
// })
// const timeChartData = ref<any>(null)
// const allTimeChartData = ref<any>(null)
// const freqChartData = ref<any>(null)
// const timeChartDataRef: any = ref(null)
// const freqChartDataRef: any = ref(null)

// //原始数据
// const getSensorRawDataNow = async () => {
//   let bo = {
//     sensorSN: nowSensor.value.sensorSN,
//   } as SensorFeatureBo
//   allTimeChartData.value = await GetSensorRawDataNowApi(bo)
//   if (allTimeChartData.value == null) {
//     timeChartData.value = null
//   } else {
//     changeTimeLine()
//   }
// }

// const rawDataTypeList = ref<Array<DataType>>([
//   {
//     name: '原始加速度',
//     value: 'accBackup',
//     option: {
//       xAxis: {
//         name: '时间 s',
//       },
//       yAxis: {
//         name: '加速度 g',
//       },
//     },
//   },
//   {
//     name: '校准后加速度',
//     value: 'acc',
//     option: {
//       xAxis: {
//         name: '时间 s',
//       },
//       yAxis: {
//         name: '加速度 g',
//       },
//     },
//   },
//   {
//     name: '速度',
//     value: 'vel',
//     option: {
//       xAxis: {
//         name: '时间 s',
//       },
//       yAxis: {
//         name: '速度 mm/s',
//       },
//     },
//   },
//   {
//     name: '位移',
//     value: 'dis',
//     option: {
//       xAxis: {
//         name: '时间 s',
//       },
//       yAxis: {
//         name: '位移 mm',
//       },
//     },
//   },
// ])
// const nowRawDataType = ref<DataType>(rawDataTypeList.value[0])

// const changeTimeLine = () => {
//   timeChartData.value = allTimeChartData.value[nowRawDataType.value.value]

//   timeChartDataRef.value.loadData(timeChartData.value, nowRawDataType.value.option)
// }

// watch(nowRawDataType, () => {
//   try {
//     if (allTimeChartData.value) {
//       changeTimeLine()
//     }
//   } catch (error) {}
// })

// // const featureColumns = ref([

// // ])

// onMounted(() => {
//   listSensor()
// })

import { ref, onMounted } from 'vue'
import { ListApi as ListSensorApi, DataTimeApi as SensorDataTimeApi } from '/@/api/sensor/sensor'
import { Sensor } from '/@/api/sensor/model/sensor'
import { PageWrapper } from '/@/components/Page'
import {
  Select,
  SelectOption,
  Form,
  FormItem,
} from 'ant-design-vue'

const dataSource = ref<Array<Sensor>>([])
const dataSourceList = ref<Array<Sensor>>([])
const deviceTypeList = ref<Array<string>>(['VS3000EDGE', 'VS2000EDGE'])
const selectedDevice = ref('VS3000EDGE');
const deviceSN = ref<any>()
const sensorDataTimeObj = ref<any>()
const handleDeviceName = (value: string) => {
  dataSource.value = dataSourceList.value.filter((item) => item.deviceType != value && item.deviceType.slice(0, 6) === value.slice(0, 6))
}
const listSensor = async () => {
  dataSourceList.value = await ListSensorApi()
  dataSource.value = dataSourceList.value.filter((item) => item.deviceType != selectedDevice.value && item.deviceType.slice(0, 6) === selectedDevice.value.slice(0, 6))
  deviceSN.value = dataSourceList.value[0].deviceSN
  console.log("deviceSN", deviceSN.value);
}

const getSensorTime = async () => {
  sensorDataTimeObj.value = await SensorDataTimeApi(deviceSN)
  console.log("sensorDataTimeObj", sensorDataTimeObj.value);
}

onMounted(() => {
  getSensorTime()
  listSensor()
})
</script>

<style lang="less" scoped></style>
